.shareCode{
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.6);
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    .codeBox{
        width: 600px;
        height: 800px;
        border-radius: 10px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        .head{
            padding: 0 20px;
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .canvasBox{
            width: 100%;
            flex: 1;
            display: flex;
            justify-content: center;
            .bodyCanvas{
                width: 430px;
                height: 430px;
                background-color: #fff;
                margin-top: 40px;
            }
        }
        .foot{
            width: 100%;
            height: 80px;
            background-color: #dcdcdc;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #fff;
            .btn{
                height: 80px;
                line-height: 80px;
                text-align: center;
                flex: 1;
            }
            .cel{
                background-color: #fff;
            }
            .save{
                background-color: red;
                color: #fff;
            }
        }
    }
}